<template>
	<app-layout :haveBackground='false'>
		<view class="body">
			<view @click="GoDetail(item)" class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.pic_url[0].pic_url" mode="aspectFill"></image>
				<text class="u-line-3">{{item.title}}</text>
			</view>
		</view>
	</app-layout>
</template>

<script>
	export default {
		data() {
			return {
				filterData: [],
				defaultIndex: [],
				cats_list: [],
				search_list: [],
				class_id: 0,
				p_cat_id: 0,
				s_CatIdx: 0,
				add_cat_id: 0,
				page: 1,
				province_id: 0,
				city_id: 0,
				district_id: 0,
				provinceString: '',
				cityString: '',
				areaString: '',
				region: [],
				list: [],
				s_idx: [],
				keyword: '',
				loading: false,
				isScrollTop: false,
				fenlei: false
			};
		},
		methods: {
			changeFl() {
				this.fenlei = !this.fenlei
			},
			onSelected(res) {
				let that = this,
					s_cats_list = {};
				that.search_list = res;
				that.getCatID(res);
				that.getCatIdx(that.p_cat_id);
				s_cats_list = that.cats_list[that.s_CatIdx];
				if (s_cats_list.child.length > 0) {
					that.fenlei = true
				} else {
					that.add_cat_id = 0;
				}
				that.page = 1;
				that.list = [];
				that.loading = false;
				that.getDate();

			},
			catChild(item) {
				let that = this;
				that.add_cat_id = item.id;
				that.page = 1;
				that.list = [];
				that.loading = false;
				that.getDate();
			},
			getCatIdx(p_cat_id) {
				let that = this;
				that.s_CatIdx = 0;
				for (let i = 0; that.cats_list.length > i; i++) {
					if (that.cats_list[i].id == p_cat_id) {
						that.s_CatIdx = i;
						break;
					}
				}
			},
			getCatID(search_list) {
				for (let i = 0; search_list.length > i; i++) {
					if (search_list[i][0].type == 'class') {
						this.p_cat_id = search_list[i][0].value;
						break;
					}
				}
			},
			dateChange(d) {
				uni.showToast({
					icon: 'none',
					title: d
				})
			},
			GoDetail(item) {
				if (item.video_url) {
					uni.navigateTo({
						url: "./video?video_id=" + item.id
					})
				} else {
					uni.navigateTo({
						url: "./detail?id=" + item.id
					})
				}

			},
			shareClick(item) {
				let that = this;

				if (item.video_url) {
					return that.$shareAppMessage({
						title: item.title,
						path: "/pages/cases/video",
						imageUrl: item.pic_url[0].pic_url,
						params: {
							video_id: item.id,
						}
					});
				} else {
					return that.$shareAppMessage({
						title: item.title,
						path: "/pages/cases/detail",
						imageUrl: item.pic_url[0].pic_url,
						params: {
							id: item.id,
						}
					});
				}

			},
			async getSearch() {
				let self = this;
				const res = await self.$request({
					url: self.$api.cases.get_search,
				});
				if (res.code === 0) {
					self.filterData = res.data.search_list
					for (let i = 0; self.filterData.length > i; i++) {

						self.defaultIndex.push(0);
					}
					if (self.class_id) {
						for (let i = 0; self.filterData[0].length > i; i++) {
							if (self.filterData[0][i].value == self.class_id) {
								self.defaultIndex[0] = i;
							}
						}
					}
					self.getDate();
				}
			},
			async requestCat(cat_id, select_cat_id) {
				this.loading = false;
				const res = await this.$request({
					url: this.$api.default.cat_list,
					method: 'get',
					data: {
						cat_id: cat_id ? cat_id : 0,
						select_cat_id: select_cat_id ? select_cat_id : 0,
						type: 1
					}
				});
				if (res.code === 0) {
					this.cats_list = res.data.list;
					// this.getDate();
				}
			},
			getDate() {
				let self = this;
				if (self.loading) {
					return false
				}
				self.loading = true;
				uni.showLoading({
					title: '加载中...'
				});
				self.$request({
					url: self.$api.cases.index,
					data: {
						page: self.page,
						region: JSON.stringify(this.region),
						search_list: JSON.stringify(this.search_list),
						keyword: self.keyword,
						add_cat_id: self.add_cat_id
					},
					method: 'get',
				}).then(response => {
					self.loading = false;
					uni.hideLoading();
					if (response.code == 0) {
						if (response.data.list.length > 0) {
							self.list = self.list.concat(response.data.list);
							self.page++;
						} else {
							uni.showToast({
								title: '没有更多内容',
								icon: 'none',
								duration: 1000
							});
							self.loading = true;
						}
					}
				}).catch(e => {
					self.loading = false;
					uni.hideLoading();
				});
			},
			search() {
				this.page = 1;
				this.list = [];
				this.loading = false;
				this.getDate();
			},
			areaEvent(data) {
				if (data) {
					this.province_id = data.province.id;
					this.city_id = data.city.id;
					this.district_id = data.district.id;
					this.region = [data.province.name, data.city.name, data.district.name];
				}
			},
			async getAutoInfo(longitude, latitude) {
				const res = await this.$request({
					url: this.$api.user.auto_address_info,
					data: {
						longitude: longitude,
						latitude: latitude
					},
					method: 'get'
				});
				if (res.code === 0) {
					let autoInfo = JSON.parse(res.data.region);
					autoInfo.unshift({
						code: "99",
						name: "不限",
						children: [{
							code: "9901",
							name: "不限",
							children: [{
								code: "990101",
								name: "不限",
							}]
						}]
					});
					const provinces = autoInfo.reduce((per, cur) => {
						const {
							children,
							...others
						} = cur;
						return per.concat(others);
					}, []);

					const cities = autoInfo.reduce((per, cur) => {
						return per.concat(cur.children.map(({
							children,
							...others
						}) => ({
							...others,
							provinceCode: cur.code
						})));
					}, []);

					const areas = autoInfo.reduce((per, cur) => {
						const provinceCode = cur.code;
						return per.concat(cur.children.reduce((p, c) => {
							const cityCode = c.code;
							return p.concat(c.children.map(({
								children,
								...others
							}) => ({
								...others,
								cityCode,
								provinceCode,
							})));
						}, []));
					}, []);

					this.provinceString = JSON.stringify(provinces);
					this.cityString = JSON.stringify(cities);
					this.areaString = JSON.stringify(areas);
				}
			},
		},
		onLoad(options) {
			let self = this;
			self.class_id = options.class_id || 0
			self.getSearch();
			self.requestCat();
		},
		onReachBottom() {
			this.getDate();
		},
		onShareAppMessage() {

		},
		onPageScroll(res) {
			if (res.scrollTop >= 42) {
				this.isScrollTop = true
			} else {
				this.isScrollTop = false
			}
		},
	};
</script>

<style lang="scss" scoped>
	.zhezhao {
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.2);
		width: 100vw;
		height: 100vh;
	}

	.fenlei {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1000;
		display: flex;
		align-items: center;
		color: #555;
		transition: 0.5s;

		.fenleTitle {
			border: #e1e1e1 1px solid;
			border-right: 0;
			background-color: #fff;
			display: block;
			padding: 15upx 10upx;
		}

		.fenleiItem {
			padding-top: 20upx;
			height: 50vh;
			width: 50vw;
			text-align: center;
			background-color: rgba(34,103,141, 0.9);
			color: #fff;

			.more {
				margin-top: 40upx;
			}
		}
	}

	.root {
		position: fixed;
		z-index: 2;
		top: 0;
		transition: 0.3s;
	}

	.header {
		padding: 0 3%;
		position: relative;

		input {
			border: 1px solid #555;
			width: calc(100% - 10upx);
			height: 60upx;
			padding-left: 10upx;
			font-size: 0.8em;
			line-height: 60upx;
			border-radius: 10upx;
			//margin-left:1%;
		}

		image {
			position: absolute;
			width: 35upx;
			top: 15upx;
			right: 40upx;
			z-index: 999;
		}
	}

	.body {
		background-color: #fff;
		margin-top: 30upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		font-size: 0.7em;

		.item {
			margin-bottom: 60upx;
			line-height: 2em;
			width: 33.33%;
			overflow: hidden;
			text-align: center;
			
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
	}
</style>